<template>
  <e-cellbox :gutter="10">
    <e-cell-item style="width:110px">
      <el-select :disabled="disabled" v-model="mySelectValue" @change="handleTypeChange">
        <el-option
          v-for="item in selectOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </e-cell-item>
    <e-cell-item>
      <template  v-if="$slots.default">
        <slot></slot>
      </template>
      <el-input v-else :key="mySelectValue" :style="inputStyle" v-bind="$props" v-on="$listeners"/>
    </e-cell-item>
  </e-cellbox>
</template>

<script>
  import {Input} from '@element-ui'
  import {Cellbox, CellItem} from './cellbox'
  export default {
    componentName: 'ESelectInputGroup',
    components: {
      ElInput: Input,
      ECellbox: Cellbox,
      ECellItem: CellItem
    },
    props: {
      ...Input.props,
      selectOptions: {
        type: Array,
        default () {
          return [
            {
              value: 1,
              label: '下拉选项1'
            },
            {
              value: 2,
              label: '下拉选项2'
            }
          ]
        }
      },
      selectValue: {
        type: Number,
        default: 1
      },
      inputStyle: {
        type: [String, Array, Object]
      }
    },
    data () {
      return {
        mySelectValue: this.selectValue
      }
    },
    watch: {
      selectValue (value) {
        this.mySelectValue = value
      }
    },
    methods: {
      handleTypeChange (value) {
        if (value !== this.selectValue) {
          this.$emit('update:selectValue', value)
          this.$emit('input', null).$emit('change', null)
          this.$emit('select-change', value)
        }
      }
    }
  }
</script>
